<template>
	<view class="content">
		<view class="l-fixed">
			<!-- #ifndef MP-WEIXIN -->
			<view class="l-status"></view>
			<!-- #endif -->

			<!-- l-head --> 

			<view class="l-head">
				<view class="l-search">
					<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
					<input type="text" class="l-search-input" v-model="search_value" placeholder="精彩热搜：金光布袋戏《羽国志异》"
						placeholder-class="l-holder" />
				</view>
				<button
					style="background-color: #007AFF;height: 60rpx;line-height: 60rpx;font-size: 20rpx;width: 75rpx;"
					@tap="search_book()">搜索</button>
			</view>
		</view>

		<view class="l-placeholder"></view>

		<view class="l-body">

			<!-- l-swiper -->

			<swiper class="l-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				indicator-color="var(--c-bg-2)" indicator-active-color="#41bdb2" circular @tap="$toast(`轮播图`)">
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="item.pic" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<!-- l-madin -->
			<view class="l-main">

				<view class="l-h3">
					<text class="l-h3-title">最新推荐</text>
					<!-- 	<view class="l-h3-more" @tap="$toast(`../search/search?type=1&value=1`)">查看全部<image class="l-icon-more"
							src="../../static/l-icon-more.png" mode="widthFix"></image>
					</view> -->
				</view>
				<view class="l-dl" v-for="(book,i) in datas" :key="i" @tap="navtoDetail(book.id)"
					@scrolltolower="scroll">
					<view>
						<image class="l-dt" :src="book.bookCover" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							{{book.bookName}}
						</view>
						<view class="l-dd-content">
							{{book.author}}
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							 -->
							<text style="font-size: 30rpx;">类型：{{book.categoryName}}</text>
						</view>
					</view>
				</view>
				<view style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
					已加载全部
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getbookList,
		categoryList,
		carouselList
	} from '@/utils/api/home.js';
	export default {
		data() {
			return {
				title: 'Hello',
				datas: [],
				page: 1,
				search_value: '',
				imgList:[]
			}
		},
		onLoad() {
			this.getList()
			this.getImgList()
		},
		methods: {
			getImgList() {
				carouselList().then(res => {
					this.imgList = res.data
				})
			},
			getList() {
				getbookList().then(res => {
					const data = res.data;
					this.datas = res.data
				}).catch(error => {
					console.error('请求出错:', error);
				});
			},
			search_book() {
				if (this.search_value == '') {
					uni.showToast({
						title: '搜索内容不能为空!',
						icon: 'none'
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/search/search?type=1&value=`+this.search_value
				})
			},
			navtoDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?bookid=' + id
				})
			}
		}
	}
</script>

<style>
	/* l-head */
	.l-head {
		margin-top: 15rpx;
	}

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>